import React from 'react';
import { Row, Col, Select, Icon, InputNumber } from 'antd';
import JunctionType from '../../../../../components/Conditions/JunctionType';

const Item = (props) => {
  const { value, isDelBtn, isAddBtn, onDel, onAdd, onChange, monitor_busi_type, monitor_oper, monitor_data_type } = props;

  const typeOf = (value) => {
    if (value.left_var_code) {
      console.log(value.left_var_code)
      let id = monitor_busi_type.find(item => item.code === value.left_var_code).id
      console.log(id)
      let type = monitor_data_type.find(item => item.code === id).value
      console.log(type)
      return type
    }
    return null
  }

  const handleChangeJunctionType = (junction_type) => {
    const tempValue = { ...value, junction_type };
    onChange && onChange(tempValue);
  };

  const handleBusiChange = ({ key: left_var_code, label: left_var_name } = {}) => {
    const tempValue = { ...value, left_var_code, left_var_name };
    onChange && onChange(tempValue);
  };

  const handleOperChange = (operator) => {
    const tempValue = { ...value, operator };
    if (operator === 'is_empty' || operator === 'not_empty') {
      tempValue.right_var_code = undefined;
    }
    onChange && onChange(tempValue);
  };

  const handleRightChange = (right_var_code) => {
    const tempValue = { ...value, right_var_code };
    onChange && onChange(tempValue);
  };
  // console.log('数据啊啊', props)
  return (
    <Row type='flex' align='middle' className='warn-condition-group-item' gutter={20}>
      <Col span={4} style={{ textAlign: 'right' }}>
        <JunctionType onChange={handleChangeJunctionType} value={value.junction_type} />
      </Col>
      <Col span={5}>
        <Select
          placeholder='选择指标'
          value={{ key: value.left_var_code, label: value.left_var_name }}
          onChange={handleBusiChange}
          getPopupContainer={() => (props.modelId ? document.getElementById(props.modelId) : document.body)}
          labelInValue
          allowClear
        >
          {monitor_busi_type.map((item) => (
            <Select.Option key={item.code} value={item.code}>
              {item.value}
            </Select.Option>
          ))}
        </Select>
      </Col>
      <Col span={5}>
        <Select placeholder='选择条件' value={value.operator} onChange={handleOperChange} allowClear>
          {monitor_oper.map((item) => (
            <Select.Option key={item.code} value={item.code}>
              {item.value}
            </Select.Option>
          ))}
        </Select>
      </Col>
      <Col span={6}>
        <InputNumber
          style={{ width: 150 }}
          min={0}
          precision={4}
          value={value.right_var_code}
          onChange={(value) => handleRightChange(value)}
          disabled={value.operator === 'is_empty' || value.operator === 'not_empty'}
        />
        <span style={{ marginLeft: 5 }}>{typeOf(value) === 'string' && '%'}</span>
      </Col>
      <Col span={4}>
        {isDelBtn && <Icon type='minus-circle' className='op-btn' onClick={() => onDel && onDel()} />}
        {isAddBtn && <Icon type='plus-circle' className='op-btn' onClick={() => onAdd && onAdd()} />}
      </Col>
    </Row>
  );
};

export default Item;
